import * as React from 'react';
import {Button, Drawer as AntdDrawer, Form as AntdForm} from 'antd';
import {renderItems, VJsonComponent, VJsonComponentBase} from "../factory";
import _ from "lodash";
import {YvanEvent} from "../types";
import {apply, YvanEventBind, YvanEventDispatch} from "../utils/helper";
import {CSSProperties} from "react";
import { toJS } from 'mobx';

export interface DrawerVJsonProp {
    closable?: boolean
    maskClosable?: boolean
    mask?: boolean
    title?: string
    visible?: boolean
    width?: string | number
    height?: string | number
    zIndex?: number
    className?: string
    style?: CSSProperties
    placement?: 'top' | 'right' | 'bottom' | 'left'
    onClose?: YvanEvent<Drawer>
    afterVisibleChange?: YvanEvent<Drawer>
    footer: any[]
    items: any[]
}

export interface DrawerState {

}

@VJsonComponent({
    view: 'drawer'
})
export default class Drawer extends VJsonComponentBase<DrawerVJsonProp, DrawerState> {
    static defaultProps = {
        maskClosable: false,
        title: '未命名抽屉',
        visible: true,
        footer: null,
        items: [],
        zIndex: 1
    }

    protected constructor(props: any) {
        super(props);

        _.defaults(
            props.vjson,
            Drawer.defaultProps
        )

        props.$context.scopeInstance['$closeDialog'] = this.close.bind(this)
    }

    close() {
        this.props.vjson.visible = false
        const drawer = document.getElementById(this.props.vjson.drawerId);
        const drawerList = drawer!.parentElement
        if (drawerList!.className == 'drawer-list' && drawerList!.getAttribute('role') == 'drawer') {
            drawerList!.style.display='none'
        }
        drawer!.remove();
    }

    onCancelEvent() {
        if (typeof this.props.vjson.onClose === 'undefined') {
            this.close()
        } else {
            YvanEventDispatch(this.props.vjson.onClose, this)
        }
    }

    debugToolClick = () => {//数据
        const scope = this.props.$context.scopeInstance
        //@ts-ignore
        window.debugTool.openDebug(scope)
    }

    render() {
        if (!this.props.vjson.visible) {
            return null
        }


        return (
            // @ts-ignore
            <AntdDrawer key={this.key} view_id={this.key} aria-roledescription={this.view}
                        closable={apply(this, this.props.vjson.closable)}
                        maskClosable={apply(this, this.props.vjson.maskClosable)}
                        mask={apply(this, this.props.vjson.mask)}
                        className={apply(this, this.props.vjson.className)}
                        // @ts-ignore
                        style={toJS(this, this.props.vjson.style)}
                        title={
                            <>{apply(this, this.props.vjson.title)}
                                {
                                    (_.has(window, 'debugTool') ?
                                        <Button style={{marginLeft: '10px'}} onClick={this.debugToolClick}>调试</Button> : null)
                                }
                            </>
                        }
                        visible={apply(this, this.props.vjson.visible)}
                        width={apply(this, this.props.vjson.width)}
                        height={apply(this, this.props.vjson.height)}
                        zIndex={apply(this, this.props.vjson.zIndex)}
                        placement={apply(this, this.props.vjson.placement)}
                        onClose={this.onCancelEvent.bind(this)}
                        afterVisibleChange={YvanEventBind(this.props.vjson.afterVisibleChange, this)}
                        getContainer={false}
                        destroyOnClose={true}
                        footer={ (!this.props.vjson.footer) ? null : renderItems(this, this.props.vjson.footer) }
            >
                {
                    ...renderItems(this, this.props.vjson.items)
                }
            </AntdDrawer>
        );
    }

}
